<template>
  <div class="form">
    <div class="group">
      <div class="label">编号</div>
      <div class="txt">{{ state.starinfo?.checkin1?.checkin_no }}</div>
    </div>
    <div class="group">
      <div class="label">姓名</div>
      <div class="txt">{{ state.starinfo?.star?.name }}</div>
    </div>
    <div class="group">
      <div class="label">年龄</div>
      <input
        type="number"
        :disabled="disabled"
        placeholder="请输入小孩年龄"
        v-model="state.age"
      />
    </div>
    <div class="group">
      <div class="label">身高</div>
      <input
        type="number"
        :disabled="disabled"
        placeholder="请输入小孩身高（cm）"
        v-model="state.height"
      />
    </div>
    <div class="group">
      <div class="label">学校</div>
      <input
        type="text"
        :disabled="disabled"
        placeholder="请输入小孩所在学校"
        v-model="state.school"
      />
    </div>
    <div class="group">
      <div class="label">履历</div>
      <textarea
        placeholder="请输入小孩的履历"
        :disabled="disabled"
        v-model="state.history"
      ></textarea>
    </div>
    <!-- <div class="group">
      <div class="label">导演点评</div>
      <div class="placeholder"></div>
    </div> -->
    <div class="tips">* 履历请尽量填写详细，更有利于导演对孩子的判断</div>
    <button class="submit" @click="submit" :disabled="disabled">确定</button>
  </div>
</template>

<script setup>
import ajax from "../../util/http";
import { reactive, getCurrentInstance, computed } from "vue";
import form from "../../util/validator";
import { useRouter, useRoute } from "vue-router";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const state = reactive({
  starinfo: {},
  age: "",
  height: "",
  school: "",
  history: "",
});
const disabled = computed(() => {
  if (
    state.starinfo?.checkin1?.open_id != localStorage.getItem("open_id") ||
    state.starinfo?.register.age
  ) {
    return true;
  } else {
    return false;
  }
});

//获取姓名和编号
ajax
  .post("/star/scene/star_table", { checkin_id: route.query.checkin_id })
  .then((res) => {
    if (res.code == 1) {
      state.starinfo = res.data;
      if (res.data.register?.age) {
        state.age = res.data.register.age;
        state.height = res.data.register.height;
        state.school = res.data.register.school;
        state.history = res.data.register.history;
      }
      document.title = res.data.crew.crew_name + "-小演员面试表";
      ajax
        .post("/star/scene/crew_info", { cid: res.data.crew.id })
        .then((res) => {
          if (res.code == 1) {
            app.style.backgroundImage = `url(${res.data.scenes_bgimage})`;
          }
        });
    }
  });

const submit = () => {
  let data = {
    checkin_id: route.query.checkin_id,
    age: state.age,
    height: state.height,
    school: state.school,
    history: state.history,
  };
  let rules = [
    {
      name: "age",
      rule: ["required", "isNum"],
      msg: ["请输入小孩年龄", "请输入正确的年龄"],
    },
    {
      name: "height",
      rule: ["required", "isNum"],
      msg: ["请输入小孩升高", "请输入正确的身高（单位/厘米)"],
    },
    {
      name: "school",
      rule: ["required"],
      msg: ["请输入小孩所在学校"],
    },
    {
      name: "history",
      rule: ["required"],
      msg: ["请输入小孩的履历"],
    },
  ];
  let checkForm = form.validation(data, rules);
  if (!checkForm) {
    ajax.post("/star/scene/addd_table", data).then((res) => {
      if (res.code == 1) {
        router.push({
          path: "/interview/success",
          query: {
            checkin_id: route.query.checkin_id,
          },
        });
      }
    });
  } else {
    proxy.$message({ content: checkForm });
  }
};
</script>